<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>宠物店数据</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <META http-equiv=Content-Type content="text/html; charset=utf-8">
    <META content="MSHTML 6.00.3790.4807" name=GENERATOR>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover">
<meta http-equiv="x-dns-prefetch-control" content="on">
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=5749ce65dd16f6d8456d5183c5d1a908&plugin=AMap.MapType,AMap.ToolBar,AMap.Driving,AMap.PlaceSearch"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none
        }
        html, body{
            height: 100%;
            width: 100%;
        }
        #container {
            height: 100%;
            width: 100%;
            font-size: 14px;
            font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
        }
        #query {
            height: 120px;
            line-height: 40px;
            width: 100%;
            position: fixed;
            bottom:0;
            left:0;
            right:0;
            z-index: 9999;
            background-color: #ccc;
        }
        #query .item {
            background-color: #ccc;
        }
        #query .item input {
            height: 38px;
            width: 100%;
            padding-right: 25px;
            font-family: SimHei;
            font-size: 1rem;
            color: #666;
            outline: 0;
            border: 0 none;
            text-indent: .5em;
            border-bottom: 1px solid #3d92fb;
        }
        #query .item #doMarkBtn {
            height: 38px;
            width: 100%;
        }
        .content-window-card{position:relative;box-shadow:none;bottom:0;left:0;width:auto;padding:0;border-radius:5px;overflow:hidden;}
        .info-top{padding:10px 15px;position:relative;background:#fff;border-bottom:1px solid #ebebeb;}
        .closeX{position:absolute;right:10px;top:2px;font-size:22px;cursor:pointer}
        .info-middle{padding:15px 15px;border-radius:0 0 5px 5px;}
        .info-bottom{height:12px;position:relative}
        .sharp{width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:12px solid #fff;position:absolute;left:50%;top:0;transform:translate(-50%,0)}
        .STYLE1 {   color: #FFFFFF;
            font-weight: bold;
            font-size: 18px;
        }
        .STYLE2 {
            color: #FF0000;
            font-weight: bold;
        }
        .STYLE3 {font-size: 12px}
    </style>
</head>
<body>

<!-- <div id="query">
    <div class="item"><input type="text" id="from" placeholder="请输入出发地"/> </div>
    <div class="item"><input type="text" id="to" placeholder="请输入目的地"/></div>
    <div class="item"><button id="doMarkBtn">查询路线</button></div>
</div> -->
<div id="container" class="amap-container" style="position: relative; background: rgb(252, 249, 242);">
</div>


<script>
    var map = new AMap.Map('container', {
        resizeEnable: true,
        zoom: 12.5,
        center: [116.591211,39.771481],

        buildingAnimation: false, //楼块出现是否带动画
        //前往创建自定义地图样式：https://lbs.amap.com/dev/mapstyle/index
    });
//mapStyle: 'amap://styles/ac617ee5ac942dc438bc8ae1b99b7939',
    map.addControl(new AMap.MapType({
        defaultType:0 //0代表默认，1代表卫星
    }));


    var allPoiList = [];
    var keyValMap = [];
 
    for(var pi=1; pi<=20; pi++) {
        // 高德地图请求快了，后面是空数据
        (function(pi){
            var timeout = 2000 * pi;
            setTimeout(function(){
                console.info("pi:" + pi)
                var placeSearch = new AMap.PlaceSearch({
                  // city 指定搜索所在城市，支持传入格式有：城市名、citycode和adcode
                  city: '421303',//通州adcode
                  pageSize: 50,
                  pageIndex: pi,
                  extensions: 'all',
                  map: map
                })

                placeSearch.search('宠物', function (status, result) {
                   // 查询成功时，result即对应匹配的POI信息
                   console.info(status, result)
                   if(result.poiList && result.poiList.count>0) {
                        for(var i=0; i<result.poiList.pois.length; i++) {
                            if(!keyValMap[result.poiList.pois[i].id]) {
                                keyValMap[result.poiList.pois[i].id] = result.poiList.pois[i];
                                allPoiList.push(result.poiList.pois[i]);
                            } else {
                                console.info(keyValMap[result.poiList.pois[i].id].name);
                            }
                        }
                   }

                   console.info(allPoiList)

                })
            }, timeout);
        })(pi);
    }

    
</script>
</body>
</html>